import React, { useEffect } from 'react'

// 导入获取数据的接口
// import { getBannerListData, getProListData } from './api/home'

// 导入两个修改全局状态的方法
import { getBannerListAction, getProListAction } from './store/modules/home'

import { useDispatch, useSelector } from 'react-redux'

export default function Home() {

    // 获取修改方法  dispatch
    const dispatch = useDispatch()

    // 获取全局状态
    const bannerList = useSelector(state => state.home.bannerList)
    const proList = useSelector(state => state.home.proList)


    // useEffect 在函数式组件中，可以替代生命周期 挂载 更新 卸载
    // 是用来做数据请求的地方
    // useEffect(回调函数, 依赖参数)
    // 依赖参数如果设置为 [] 空数组，相当于只在组件挂载阶段调用一次
    useEffect(() => {
        // console.log('你好世界');
        // getBannerListData().then(res => {
        //     console.log(res.data.data);
        //     // 拿到数据后，将数据保存在全局状态中
        //     dispatch(changeBannerList(res.data.data))
        // })

        // 触发异步操作
        // 如果不需要传递参数的时候，不要在函数后面加 ()
        dispatch(getBannerListAction)

        // getProListData({ limitNum: 8 }).then(res => {
        //     console.log(res.data.data);
        //     dispatch(changeProList(res.data.data))
        // })

        // 有参数的时候你可以加括号进行传递参数，同时定义异步函数的时候
        // 需要 return 出一个函数
        dispatch(getProListAction({ limitNum: 5 }))
    }, [])


    const banner = bannerList.map(item => {
        return <img key={item.bannerid} style={{ width: 100 }} src={item.img} />
    })

    return (
        <div>
            {banner}

            <ol>
                {proList.map(item => {
                    return <li key={item.proid}>{item.proname}</li>
                })}
            </ol>
        </div>
    )
}
